<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-family: Arial, "Free Sans";
        }

        #container {
            margin-top: 20px;
            color: #fff;
        }

        #container #question {
            display: block;
            padding: 20px;
            font-weight: bold;
            letter-spacing: -3px;
            margin-bottom: 20px;
            padding: 10px;
            font-size: 40px;
        }

        #container div {
            font-weight: bold;
            letter-spacing: -3px;
            background: #0099cc;
            margin-bottom: 15px;
            padding: 10px;
            font-size: 34px;
            color: #ffffff;
            border-left: 20px solid #333;
            width: 400px;
            -webkit-border-radius: 0.5em;
            -moz-border-radius: 0 0.5em 0.5em 0;
            border-radius: 0 1.5em 1.5em 0;
        }

        #container div a {
            border-radius: 0.3em;
            text-decoration: none;
            color: #0099cc;
            padding: 5px 15px;
            background: #333;
            margin: 0 20px;
        }

        #container div a:hover {
            color: #fff;
        }

        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }

        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }

        #main a:hover {
            text-decoration: underline;
        }

        body {
            margin: 0;
            padding: 0;
            background: #ffffff url('http://files.jb51.net/file_images/article/201508/2015810110844109.gif') repeat right top;
        }

        #text {
            margin: 0 auto;
            width: 500px;
            font-size: 12px;
            color: #0099cc;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
        }
    </style>

    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>

        $(function () {

            $("#container a").click(function () {
                $(this).parent().animate({
                    width: "+=100px"
                }, 300)

                $(this).prev().text(parseInt($(this).prev().text())+1)

                return false
            })
        })

    </script>

</head>
<body>
<h3>当点击相对应的投票按钮，相对应的进度条边长，并且左边的票数自加1></h3>
<div id="container">
    <span id="question">你最喜欢的编程语言是哪一种？</span>
    <div>
        <span>0</span>
        <a href="">投票</a>PHP
    </div>
    <div><span>0</span>
        <a href="">投票</a>Ruby
    </div>
    <div><span>0</span>
        <a href="">投票</a>Java
    </div>
    <div><span>0</span>
        <a href="">投票</a>ASP
    </div>
    <div><span>0</span>
        <a href="">投票</a>Perl
    </div>
    <div><span>0</span>
        <a href="">投票</a>ColdFusion
    </div>
</div>
</body>
</html>